<template>
	<view class="Header">
		<view class="Return">
			<!-- <view class="iconfont icon-zuo lefts"></view>
			<view class="Returnright">登录</view> -->
		</view>
		<view class="Whiteview">
			<view class="Codes">
				<view class="CodeLogin">{{CodeShow?"验证码登录":"密码登录"}}</view>
				<view class="PassLogin" @click="CodeShow=!CodeShow">{{!CodeShow?"验证码登录":"密码登录"}}</view>
			</view>
			<!-- 验证码 -->
			<view class="ipt" v-show="CodeShow">
				<view class="Username">
					<input type="text" v-model="user.mobile" value="" placeholder="请输入账号" />
				</view>
				<view class="Usernames">
					<input type="text" class="Ipts" v-model="user.code" value="" placeholder="请输入验证码" />
					<view class="GetCode" v-show="!isCode" @click="send">获取验证码</view>
					<view class="GetCode" v-show="isCode">{{time}} S</view>
				</view>
			</view>
			<!-- 密码 -->
			<view class="ipt" v-show="!CodeShow">
				<view class="Username">
					<input type="text" v-model="user.mobile" value="" placeholder="请输入账号" />
				</view>
				<view class="Usernames">
					<input type="password" v-model="user.pass" value="" placeholder="请输入密码" />
				</view>
			</view>
		</view>

		<view class="Logins" @click="GoLogins()">登录</view>
		<view class="NoAccount" @click="GoZhuce()">
			没有账号，立即注册
		</view>
	</view>
</template>

<script>
	import {
		member,
		memberloginByCode,
		memberregByCode
	} from "../../apis/index.js"
	export default {
		data() {
			return {
				user: {
					mobile: "13000000000",
					pass: "",
					code: ""
				},
				CodeShow: false,
				isCode: false,
				time: 10,
				timer: ""
			}
		},
		methods: {
			GoZhuce() {
				console.log(1212121);
				uni.redirectTo({
					url: '/pages/Register/Register'
				})
			},
			async send() {
				let flag =
					/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[01256789]))\d{8}$/
				if (!this.user.mobile) return this.$message.error("请输入手机号")
				if (!flag.test(this.user.mobile)) return this.$message.error("请输入正确手机号")
				//
				await member({
					mobile: this.user.mobile
				})
				this.$message.success('发送成功')

				//定时器
				this.isCode = true
				this.timer = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						this.isCode = false
						this.time = 10
						// 清楚定时器
						clearInterval(this.timer)
					}
				}, 1000)
			},
			async GoLogins() {
				if (this.CodeShow) {
					if (!this.user.mobile) return this.$message.error("请输入手机号")
					if (!this.user.code) return this.$message.error("请输入验证码")

					let ress = await memberloginByCode({
						mobile: this.user.mobile,
						code: this.user.code
					})
					console.log("会员登录（验证码登录方式)", ress);
					//存储token
					uni.setStorageSync("token", ress.token)
					uni.setStorageSync("member", ress.member)
					this.$message.success("登陆成功")

					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					if (!this.user.mobile) return this.$message.error("请输入手机号")
					if (!this.user.pass) return this.$message.error("请输入密码")
					let resd = await memberregByCode({
						mobile: this.user.mobile,
						pass: this.user.pass
					})
					console.log("会员登录（密码登录方式", resd);
					this.$message.success("登陆成功")
					uni.setStorageSync("token", resd.token)
					uni.setStorageSync("member", resd.member)
					uni.switchTab({
						url: "/pages/index/index"
					})
				}
			}

		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;
		background-color: #f4f5fa;
	}

	.Return {
		display: flex;
		justify-content: center;
		padding-top: 48rpx;
		// padding-top: var(--status-bar-height);
		box-sizing: border-box;
		position: relative;
		font-size: 35rpx;
		color: #fff;

		.lefts {
			position: absolute;
			left: 30rpx;
			top: 48rpx;
		}
	}

	.Whiteview {
		height: 410rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin: 0rpx 25rpx 68rpx 25rpx;

		.Codes {
			display: flex;
			justify-content: center;
			position: relative;

			.CodeLogin {
				font-size: 34rpx;
				color: #000;
				font-weight: bold;
				padding-top: 68rpx;
			}

			.PassLogin {
				font-size: 27rpx;
				position: absolute;
				right: 28rpx;
				top: 73rpx;
			}
		}
	}

	.Header {
		height: 432rpx;
		background: url("../../static/images/Member_bj.png");
		background-size: 100% 432rpx;
		background-repeat: no-repeat;
	}

	.Username {
		margin-top: 70rpx;
		border-bottom: 3rpx solid #eee;
		margin-left: 28rpx;
		padding-left: 5rpx;
		padding-bottom: 25rpx;
		font-size: 30rpx;
		color: #959595;
	}

	.Usernames {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		margin-left: 28rpx;
		margin-top: 33rpx;
		color: #959595;
	}

	.GetCode {
		font-size: 30rpx;
		color: #2f6ab4;
		margin-right: 76rpx;
	}

	.Logins {
		height: 96rpx;
		margin: 66rpx 130rpx 120rpx 130rpx;
		background-color: #5dacef;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 96rpx;
		border-radius: 46rpx;
	}

	.NoAccount {
		font-size: 30rpx;
		color: #000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Ipts {
		width: 50%;
	}
</style>